<template>
  <view class="content">
    <!--banner-->
    <view class="banner">
      <swiper class="swiper">
        <swiper-item v-for="(item,i) in banners" :key="i" class="banner">
          <image :src="item.cover" mode="aspectFill" class="img" @click="handleBannerClick(item)"/>
        </swiper-item>
      </swiper>

      <view class="actions">
        <view class="location">
          <text class="cuIcon-location icon"></text>
          <text>{{ address.city }}</text>
        </view>

        <view class="search">
          <text class="cuIcon-search"></text>
          <input type="text" class="input" :placeholder="searchPlaceHolder" v-model="searchValue"
                 @confirm="handleSearchConfirm" confirm-type="search"/>
        </view>

        <!--<view class="notify">-->
        <!--  <text class="cuIcon-mark"></text>-->
        <!--</view>-->
      </view>
    </view>

    <!--分类-->
    <view class="classify">
      <swiper class="swiper" indicator-dots indicator-active-color="#BC9338">
        <swiper-item v-for="(page,i) in classifyPage" :key="i" class="banner">
          <view class="classify-grid">
            <view v-for="(classify,j) in page" :key="j" class="classify-item" @click="handleClassifyClick(classify)">
              <image :src="classify.cover" class="icon"></image>
              <view class="name">{{ classify.tabName }}</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!--优惠券-->
    <view class="coupon-wrapper" v-if="couponList.length > 0">
      <scroll-view class="coupon-bg" scroll-x>
        <view class="coupon" v-for="(coupon,i) in couponList" :key="i" @click="handleCouponClick(coupon)">
          <view class="block">
            <view class="title">
              <view class="text">全场通用券</view>
            </view>
            <view class="money">
              <text>￥</text>
              <text class="num">{{ coupon.saleMoney }}</text>
            </view>
          </view>
          <view class="divider"></view>
          <view class="block">
            <view class="message" v-if="coupon.needMoney == 0">无门槛</view>
            <view class="message" v-else>满{{ coupon.needMoney }}元可用</view>
            <view class="btn " :class="{active:coupon.sku > 0}">{{ coupon.sku > 0 ? '立即领取' : '已领完' }}</view>
            <view class="time" v-if="coupon.cycle == 0">永久有效</view>
            <view class="time" v-else> 有效期：{{ coupon.cycle }}天</view>
          </view>

        </view>
      </scroll-view>
    </view>

    <!--秒杀-->
    <view class="activity seckill" v-if="mxList.length > 0">
      <view class="header">
        <view class="left">
          <!--<view class="divider"></view>-->
          <view class="title">限时秒杀</view>
          <!--<view class="sub-title">美甲美睫一口价</view>-->
        </view>
        <view class="right" @click="handleMsMoreClick">
          <text>更多</text>
          <text class="cuIcon-right"></text>
        </view>
      </view>

      <view class="list">
        <view class="item" v-for="(activity,i) in mxList" :key="i" @click="handleMsClick(activity)">
          <view class="label" :class="'type'+activity.goodsType">
            <text v-if="activity.goodsType == 1">服务</text>
            <text v-else>商品</text>
          </view>
          <image :src="activity.cover" class="cover"></image>
          <view class="title text-cut m">{{ activity.goodsName }}</view>
          <view class="money m">
            <text>￥{{ activity.price }}</text>
            <text class="gray">￥{{ activity.linePrice }}</text>
          </view>
          <view class="sku m">
            <text>仅剩</text>
            <text class="light">{{ activity.sku }}</text>
          </view>
          <view class="tags m">
            <text class="btn">秒杀</text>
          </view>
        </view>
      </view>

    </view>

    <!--活动-->
    <view class="activity">
      <view class="header">
        <view class="left">
          <view class="divider"></view>
          <view class="title">活动专区</view>
          <!--<view class="sub-title">美甲美睫一口价</view>-->
        </view>
        <view class="right" @click="handleActivityMoreClick">
          <text>更多</text>
          <text class="cuIcon-right"></text>
        </view>
      </view>

      <view class="list">
        <view class="item" v-for="(activity,i) in activities" :key="i" @click="handleActivityClick(activity)">
          <image :src="activity.cover" class="cover"></image>
          <view class="title text-cut">{{ activity.goodsName }}</view>
          <view class="info" @click.stop="handleActivityShopClick(activity)">
            <image :src="activity.comCover" class="avatar"></image>
            <view class="info-content">
              <view class="name text-cut">{{ activity.comName }}</view>
              <starts :value="Number(activity.score).toFixed(0)" read-only/>
            </view>
          </view>
          <view class="money">
            <text>￥{{ activity.price }}</text>
            <text class="gray">￥{{ activity.linePrice }}</text>
          </view>
          <view class="tags">
            <text class="tag">{{ activity.classifyName }}</text>
            <!--<text class="tag">每周精选</text>-->
          </view>
        </view>
      </view>

    </view>

    <!--热卖推荐-->
    <view class="hot-sell">
      <view class="title">热卖推荐</view>
      <view class="tags">
        <view class="tag" :class="{active:shopType == 0}" @click="handleShopTypeClick(0)">附近</view>
        <view class="tag" :class="{active:shopType == 1}" @click="handleShopTypeClick(1)">全城</view>
      </view>
      <view class="list">
        <view class="item" v-for="(item,i) in hotSells" :key="i" @click="handleShopClick(item)">
          <image class="cover" :src="item.cover"></image>
          <view class="right">
            <view class="top">
              <view class="name text-cut2">{{ item.comName }}</view>
              <starts read-only :value="Number(item.score).toFixed(0)"/>
            </view>
            <view class="sells">已销售{{ item.serviceCount }}</view>
            <view class="distance">距您：{{ item.distance }}</view>
          </view>
        </view>
      </view>
    </view>
    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!hotSells || hotSells.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>


    <view class="ad" v-if="showAd">
      <view class="mask" @click="showAd =false"></view>
      <view class="as-content">
        <image :src="activityContent" class="image" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script>
import Starts from "@/components/stars";
import Api from "@/utils/Api";
import MapApi from "@/utils/MapApi";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  components: {Starts, ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      searchValue: "",
      searchPlaceHolder: "搜索项目",
      banners: ['/static/img/logo.png', '/static/img/tsl2.jpg', '/static/img/tsl3.jpg'],
      classifyList: [],
      couponList: [],
      mxList: [],
      activities: [],
      hotSells: [],
      address: {},

      shopType: 0,

      shopPage: 0,
      loading: false,
      loadOver: false,
      activityContent: '',
      showAd: false,
    }
  },
  onLoad() {
    this.init();
    this.getConfig();
  },
  computed: {
    classifyPage() {
      return this.classifyList.chunk(8);
    }
  },
  methods: {
    clear() {
      this.shopPage = 0;
      this.hotSells = [];
      this.loadOver = false;
      this.loading = false;
    },
    getBanner() {
      Api.getBanner(1).then(res => {
        this.banners = res;
      })
    },
    /**
     * 定位
     */
    getLocation(force, callback) {
      this.core.getLocation(res => {
        MapApi.getAddressInfoFromLocation(`${res.latitude},${res.longitude}`).then(res => {
          let {address_component: component, location} = res.result;
          this.address = {...component, location}

          typeof callback === 'function' && callback();
          console.log('当前位置', this.address);
        })
      })
    },
    /**
     * 附近店铺
     */
    getShopList() {
      if (this.loadOver) return;
      this.loading = true;

      let {location, city} = this.address
      let data = {page: ++this.shopPage}
      Object.assign(data, location);
      if (this.shopType == 1) data.city = city

      Api.getStoreList(data).then(res => {
        this.hotSells.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },
    /**
     * 分类
     */
    getItemTypes() {
      Api.getMainTabs().then(res => {
        this.classifyList = res
      })
    },
    /**
     * 优惠券
     */
    getCoupon() {
      Api.getCouponList(0).then(res => {
        this.couponList = res/*.slice(0, 3)*/
      })
    },
    /**
     * 获取活动商品
     */
    getActivities() {
      Api.getGoods({top: 1}).then(res => {
        this.activities = res.slice(0, 3)
      })
    },
    /**
     * 领取优惠券
     */
    handleCouponClick(coupon) {
      Api.receiveCoupon(coupon.id).then(res => {
        this.$toast("领取成功");
      })
    },
    getConfig() {
      Api.getConfig('activity_content').then(res => {
        let {value, model} = res;
        this.activityContent = value;
        if (value) {
          if (model == 1) {
            uni.showModal({
              title: "公告",
              content: value,
              showCancel: false,
              confirmText: '知道了'
            })
          } else {
            this.showAd = true;
          }
        }

      })
    },

    getMsList() {
      Api.getMsList().then(res => {
        this.mxList = res.slice(0, 3)
      })
    },


    handleActivityShopClick(activity) {
      uni.navigateTo({url: `/pages/shop/index/index?id=${activity.comId}`})
    },
    handleActivityClick(activity) {
      uni.navigateTo({url: `/pages/shop/goods/detail?id=${activity.id}`})
    },
    handleMsClick(activity) {
      uni.navigateTo({url: `/pages/shop/goods/detail?type=1&id=${activity.id}`})
    },
    handleShopTypeClick(type) {
      this.shopType = type;
      this.clear();
      this.getShopList();
    },
    handleActivityMoreClick() {
      uni.navigateTo({url: `/pages/index/main/more-activity/index`})
    },
    handleMsMoreClick() {
      uni.navigateTo({url: `/pages/index/main/more-ms/index`})
    },
    handleClassifyClick(classify) {
      uni.navigateTo({url: `/pages/classify/index?id=${classify.id}&name=${classify.tabName}`})
    },
    handleShopClick(item) {
      uni.navigateTo({url: `/pages/shop/index/index?id=${item.id}`})
    },
    handleLoginTrigger() {
      this.init();
    },
    handleBannerClick(item) {
      let {link, skipId} = item;
      if (link) {
        uni.navigateTo({url: `${link}?id=${skipId}`})
      }
    },
    handleSearchConfirm() {
      if(this.searchValue) {
        uni.navigateTo({url: `/pages/goods/list?keyword=${this.searchValue}`})
        this.searchValue = "";
      }
    },
    init(force) {
      this.clear();
      this.getLocation(force, _ => {
        this.getBanner();
        this.getItemTypes();
        this.getCoupon();
        this.getMsList();
        this.getActivities();
        this.getShopList();
      });
    },
  },
  filters: {},
  onShareAppMessage(info) {
    console.log(info)
  },
  onPullDownRefresh() {
    this.init(true);
  },
  onReachBottom() {
    this.getShopList();
  },
}
</script>

<style scoped lang="scss">

.content {

  .banner {
    position: relative;
    width: 100%;

    .swiper {
      height: r(367px);
      width: 100%;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .actions {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      display: flex;
      padding: r(28px 20px 0 20px);
      align-items: center;

      .location {
        background: rgba(#AE9AB0, 0.42);
        border-radius: r(28px);
        height: r(56px);
        padding: r(0 28px);
        display: flex;
        align-items: center;
        color: white;
        font-size: r(24px);

        .icon {
          margin-right: r(7px);
          color: #BC9338;
          font-size: r(30px);
        }
      }

      .search {
        flex: 1;
        height: r(56px);
        background: rgba(#F9F8FD, 0.93);
        border-radius: r(28px);
        margin: r(0 30px);
        display: flex;
        align-items: center;
        padding: r(0 28px);

        .input {
          margin-left: r(14px);
          font-size: r(24px);
          flex: 1;
          height: 100%;

          ::v-deep .uni-input-wrapper .uni-input-placeholder {
            font-size: r(24px);
          }
        }
      }

      .notify {
        color: #909090;
      }
    }
  }

  .classify {
    width: 100%;
    background-color: white;

    .swiper {
      height: r(380px);

      ::v-deep .uni-swiper-wrapper {
        .uni-swiper-slides {
          height: calc(100% - 0px) !important;
        }
      }
    }

    .classify-grid {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .classify-item {
        width: 25%;
        height: r(170px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .icon {
          width: r(86px);
          height: r(86px);
          border-radius: 50%;
        }
      }
    }
  }

  .coupon-wrapper {
    background-color: white;
    padding: r(13px);
    width: 100%;

    .coupon-bg {
      background-image: linear-gradient(to bottom, #FCE9DB, #F7B1A9);
      border-radius: r(12px);
      padding: r(30px 17px);
      //display: flex;
      //flex-wrap: nowrap;
      //overflow-x: auto;
      width: 100%;
      //height: r(348px);
      white-space: nowrap;

      .coupon {
        flex-shrink: 0;
        width: r(220px);
        background: #FFF8F2;
        border-radius: r(10px);
        display: inline-flex;
        flex-direction: column;
        margin-right: r(17px);

        .block {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          .title {
            padding: r(7px 19px);
            background: #21231B;
            border-radius: r(0 0 10px 10px);

            .text {
              font-size: r(20px);
              background: linear-gradient(to bottom, #FDCE66A3 0%, #FCA82CA3 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }

          .money {
            font-size: r(29px);
            font-weight: 500;
            color: #CE3133;
            height: r(94px);
            padding-top: r(20px);

            .num {
              font-size: r(54px);
            }
          }

          .message {
            color: #CE3133;
            font-size: r(22px);
            padding: r(17px 0);
          }

          .btn {
            background: #9A9A9A;
            border-radius: r(19px);
            font-size: r(21px);
            color: #FFFFFF;
            width: r(160px);
            text-align: center;
            height: r(37px);
            line-height: r(37px);

            &.active {
              color: #FDCE66;
              background: linear-gradient(0deg, #DE3132 0%, #C01314 100%);
              box-shadow: -3px 2px 9px 0px rgba(184, 9, 10, 0.36);
            }
          }

          .time {
            margin: r(8px 0);
            font-size: r(14px);
            color: #999999;
          }
        }

        .divider {
          border-bottom: 1px dashed rgba(#C61216, .36);
        }
      }
    }

  }


  .activity {
    margin-top: r(18px);

    .header {
      background-color: white;
      display: flex;
      justify-content: space-between;
      padding: r(20px);
      padding-bottom: 0;

      .left {
        display: flex;
        align-items: center;

        .divider {
          width: 1px;
          height: r(30px);
          background: #BC9338;
        }

        .title {
          font-size: r(30px);
          color: #333333;
          margin: r(0 25px);
        }

        .sub-title {
          font-size: r(22px);
          color: #909090;
        }
      }

      .right {
        font-size: r(22px);
        color: #909090;
      }
    }

    .list {
      background-color: white;
      margin: r(0 0 18px 0);
      display: flex;
      width: 100%;
      padding: r(30px 0 30px 20px);

      .item {
        width: calc(33.333% - #{r(20px)});
        margin-right: r(20px);

        .cover {
          width: 100%;
          height: r(220px);
        }

        .title {
          word-break: break-all;
          font-size: r(26px);
          //height: r(74px);
          color: #333333;
        }

        .info {
          width: 100%;
          display: flex;
          margin: r(20px 0);

          .avatar {
            flex-shrink: 0;
            height: r(47px);
            width: r(47px);
            border-radius: 50%;
            margin-right: r(10px);
          }

          .info-content {
            flex: 1;
            width: calc(100% - #{ r(57px)});

            .name {
              width: 100%;
              font-size: r(24px);
              color: #333333;
            }
          }
        }

        .money {
          font-size: r(24px);
          color: #E73832;

          .gray {
            text-decoration: line-through;
            color: #909090;
          }
        }

        .tags {
          display: flex;

          .tag {
            border: 1px solid #FF7671;
            border-radius: r(4px);
            color: #E73832;
            font-size: r(20px);
            padding: r(2px 6px);
            margin-left: r(10px);
            margin-top: r(20px);
          }
        }

      }
    }
  }

  .seckill {
    .header {
      background: transparent;

      .left {
        .title {
          color: #d72a2c;
          font-weight: bold;
          font-style: italic;
          margin: 0;
        }
      }
    }

    .list {
      background: transparent;

      .item {
        background: white;
        padding-bottom: r(10px);
        border-radius: r(10px);
        position: relative;

        .label {
          position: absolute;
          left: r(-6px);
          top: r(-6px);
          z-index: 1;
          color: white;
          border-radius: r(20px 0);
          padding: r(5px 20px);

          &.type1 {
            background-color: #E73832;
          }

          &.type2 {
            background-color: $primary-color;
          }
        }

        .cover {
          border-radius: r(10px 10px 0 0);
        }

        .m {
          margin-right: r(10px);
          margin-left: r(10px);
        }

        .sku {
          color: #232323;
          font-size: r(22px);

          .light {
            margin-left: r(10px);
            color: #d72a2c;
          }
        }

        .tags {
          display: flex;
          justify-content: flex-end;

          .btn {
            color: white;
            border-radius: r(30px);
            background-color: #d72a2c;
            padding: r(5px 16px);
            font-size: r(22px);
          }

        }
      }
    }

  }

  .hot-sell {
    background-color: white;
    padding: r(30px 18px);

    .title {
      font-size: r(28px);
      color: #333333;
    }

    .tags {
      margin-top: r(24px);
      display: flex;

      .tag {
        padding: 0 r(35px);
        margin-right: r(18px);
        background: #F7F7F7;
        height: r(42px);
        line-height: r(42px);
        border-radius: r(4px);
        font-size: r(22px);
        color: #666666;

        &.active {
          background: #BF8F3A;
          color: #FFFFFF;
        }
      }
    }

    .list {
      margin-top: r(30px);

      .item {
        display: flex;
        margin-bottom: r(30px);

        .cover {
          height: r(200px);
          width: r(200px);
          margin-right: r(30px);
        }

        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .top {
            margin-bottom: r(20px);

            .name {
              font-size: r(28px);
              color: #333333;
              margin-bottom: r(20px);
            }
          }

          .sells {
            background: rgba(#E73832, 0.12);
            border-radius: r(4px);
            font-size: r(20px);
            color: #E73832;
            padding: r(4px 7px);
          }

          .distance {
            color: #aaa;
            font-size: r(24px);
          }
        }
      }
    }
  }
}

.ad {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .2);
  }

  .as-content {
    width: 100%;
    margin: r(0 50px);

    .image {
      width: 100%;
      border-radius: r(30px);
    }
  }

}


</style>
